<template>
  <div class="system-role-container">
  	<el-card shadow="hover">
	  <el-tabs v-model="tabsActiveName">
	    <el-tab-pane label="站点设置" name="setting">
	      <Site />
	    </el-tab-pane>
	    <el-tab-pane label="商品设置" name="product">
	      <Product />
	    </el-tab-pane>
	  </el-tabs>
	  </el-card>
  </div>
</template>

<script lang="ts">
	import { toRefs, reactive, computed, defineComponent, onMounted } from 'vue';
	import { NextLoading } from '/@/utils/loading';
	import Site from '/@/views/system/setting/component/settingsSite.vue';
	import Product from '/@/views/system/setting/component/settingsProduct.vue';
	// 定义接口来定义对象的类型
	interface SettingsState {
		tabsActiveName: string;
	}

	export default defineComponent({
		name: 'SettingsIndex',
		components: { Site, Product },
		setup() {
			const state = reactive<SettingsState>({
				tabsActiveName: 'setting',
			});
			// 页面加载时
			onMounted(() => {
				NextLoading.done();
			});
			return {
				...toRefs(state),
			};
		},
	});
</script>

